
<template>
  <div id="background" class="col-lg-12" align="center">

    <div class="form-inline col-lg-6 " id="login-body" style="padding: 0 ">
      <div class="col-lg-6" style="margin: 0;padding: 0">
        <img src="static/img/LoginImg.png" class="img-fluid img-thumbnail" style="border: 0">
      </div>
      <div class="col-lg-6" >

        <div class="d-block d-lg-none mb-4"></div>

        <div class="ml-4" style="text-align: left">
          <div class="col-12">

            <h3 class="mb-3">efosys后台登陆</h3>

            <span class="form-text mb-1">账号：</span>
            <input type="text" id="username" class="form-control mb-3" style="width: 95%" v-model="username">

            <span class="form-text mb-1">密码：</span>
            <input type="password" id="password" class="form-control " style="width: 95%" v-model="password">
            <div class="d-none d-lg-block mb-2"></div>
            <div class="d-block d-lg-none mb-1"></div>
            <br>
            <button class="btn btn-primary" style="width: 95%" v-on:click="login">登录</button>
            <div class="d-block d-lg-none mb-4"></div>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>


<script>
  import service from "../utils/axios";

  export default {
    name: 'HelloWorld',
    data () {
      return {
        username: "",
        password: ""
      }
    },
    methods:{
      login(){
        service.post("/login",{
          "password": this.password,
          "username": this.username
        }).then(data => {
          localStorage.setItem("token", data.data.data);
          this.$router.push("Home")
        });
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  #background{
    position: absolute;
    height: 100%;
    background-color: #F5F6F9;
  }
  #login-body{
    position: relative;
    top: 20%;
    background-color: #fff;
  }

  @media screen and (max-width: 800px){

    #login-body{
      position: relative;
      top: 3%;
      background-color: #fff;
    }

  }
</style>
